<!--
 * @Author: long
 * @Date: 2021-09-15 10:36:12
 * @LastEditTime: 2021-10-15 10:54:08
 * @LastEditors: Please set LastEditors
 * @Description: 脸库列表
 * @FilePath: \ant-design-vue-jeecge:\hjimi\人脸辨识云\html\gitlab\pc\facecloudwebsite\src\views\face-recognition\faceLibrary-manage\faceLibraryList.vue
-->
<style lang="less" scoped>
.secret_key {
  cursor: pointer;
  display: inline-block;
  margin-left: 5px;
}
.displayName {
  cursor: pointer;
}
.serachMenu {
  ul {
    max-height: 300px;
    overflow-y: auto;
  }
  ul::-webkit-scrollbar {
    width: 5px;
}
ul::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}
ul::-webkit-scrollbar-track {
    background: #efefef;
    border-radius: 10px;
}
}
</style>
<template>
  <div class="app_container">
    <div class="box_style">
      <div class="flexbetween pb25">
        <span class="table_tit_txt">脸库列表</span>
        <div>
          <a-dropdown overlayClassName="serachMenu">
         <a class="ant-dropdown-link" @click="e => e.preventDefault()"> 所有应用 <a-icon type="down" /></a>
          <a-menu slot="overlay" @click="searchMenuHandle">
            <a-menu-item v-for="(app) in appList" :key="app.id">{{ app.name }}</a-menu-item>
          </a-menu>
        </a-dropdown>
          <a-button type="primary" class="ml10 mr10" @click="fluchTableHandle">重置</a-button>
          <a-button v-permission="['root', 'btn_42']" type="primary" @click="createLibraryShow" ><a-icon type="plus" /> 新建脸库</a-button>
        </div>
      </div>
      <a-table :columns="columns" :scroll="{ y: 600 }" :dataSource="tableData" :loading="loading" :rowKey="(tableDatas) => tableDatas.id" :pagination="paginationHandle" >
        <div slot="displayName" slot-scope="text, row"><span class="theme_col displayName" @click="goFaceDetailsPage(row)">{{ row.displayName }}</span></div>
         <div slot="userId" slot-scope="text, row"><span class="theme_col displayName"  @click="goAppDetailsPage(row)">{{ row.appId | filterAppId(appList) }}</span></div>
         <div slot="action" slot-scope="text, row">
          <span class="theme_col pointer pr10" @click="editNameHandle(row)" v-permission="['root', 'btn_42']" v-show="row.roleType !== 'default'">重命名</span>
          <span class="theme_col pointer pr10" v-show="false" @click="downFaceZip(row)">导出</span>
          <a-popconfirm placement="bottom" v-show="row.roleType !== 'default'" v-permission="['root', 'btn_42']" ok-text="删除" cancel-text="取消" @confirm="delFaceLibray_handle(row)">
        <template slot="title">
          <p>确认删除此脸库吗？</p>
        </template>
        <span class="pointer danger_col">删除</span>
      </a-popconfirm>
        </div>
      </a-table>
      
      <a-modal title="新建脸库" :visible="visible_faceLibrary" width="30%" @cancel="faceLibrary_handleCancel" :maskClosable="false" :destroyOnClose="true">
        <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
          <a-form-model-item has-feedback label="脸库名称" prop="displayName">
            <a-input v-model="ruleForm.displayName" autocomplete="off" placeholder="请输入脸库名称" :maxLength=12 allowClear />
          </a-form-model-item>
            <a-form-model-item has-feedback label="脸库编码" prop="code">
            <a-input v-model="ruleForm.code" autocomplete="off" placeholder="请输入脸库编码" :maxLength=12 allowClear />
          </a-form-model-item>
           <a-form-model-item has-feedback label="脸库容量" prop="maxSize">
            <a-input v-model.number="ruleForm.maxSize" autocomplete="off" placeholder="请输入脸库容量" :maxLength=9 allowClear />
          </a-form-model-item>
          <a-form-model-item has-feedback label="所属应用" prop="appId">
            <a-select v-model="ruleForm.appId" placeholder="请选择应用" @change="appChange" allowClear>
              <a-select-option v-for="(appLis, index) of appList" :key="index" :value="appLis.id" >{{ appLis.name }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
        
        <div slot="footer" class="t_center">
          <a-button type="primary" :loading="confirmLoading" @click="save_handleOk('ruleForm')">保存</a-button>
          <a-button @click="faceLibrary_handleCancel">取消</a-button>
        </div>
      </a-modal>

       <a-modal title="重命名" :visible="visible_editName" width="18%" @cancel="faceLibrary_name_handleCancel" :maskClosable="false">
      <a-form-model ref="eidtRuleNameForm" :model="eidtNameForm" :rules="eidtRuleNameForm">
        <a-form-model-item has-feedback prop="displayName">
      <a-input v-model="eidtNameForm.displayName" placeholder="请输入新的脸库名称" autocomplete="off" />
    </a-form-model-item>
      </a-form-model>
      <div slot="footer">
          <a-button type="primary" :loading="confirmLoading" @click="save_handleName('ruleForm')">确认</a-button>
        </div>
       </a-modal>
    </div>
  </div>
</template>
<script>
import { libraryList, createLibrary, deleteLibrary, editLibraryName } from "@/api/face-recognition/faceLibraryManage"

import { getAppList, validateNotNull } from '@/utils/business'
import { filterAppId } from '@/filters/business'

export default {
  data() {
   let validateCode = (rule, value, callback) => {
      value === ""
        ? callback(new Error("请输入脸库编码"))
        : !/(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{1,64}/g.test(value)
        ? callback(new Error("格式为字母数字或下划线组成"))
        : callback()
      callback()
    }
  let maxSize = (rule, value, callback) => {
      value === ""
        ? callback(new Error("请输入库存容量"))
        : value > 100000000
        ? callback(new Error("库存数量不能超过1亿"))
        : callback()
      callback()
    }
    return {
      visible_faceLibrary: false,
      confirmLoading: false,
      visible_editName: false,
      
       appList: [],
       eidtNameForm: {
         displayName: ''
       },
       eidtRuleNameForm: {
         displayName: validateNotNull('脸库名称') 
       },
       
       ruleForm: {
        appId: '',
        code: '',
        displayName: '',
        maxSize: ''
      },
      rules: {
        displayName: validateNotNull('脸库名称'),
        code: [{required: true, validator: validateCode, trigger: "blur" }],
        appId: validateNotNull('应用名称'),
        maxSize: [
            { required: true, validator: maxSize, trigger: "blur" },
            { type: 'number', message: '库存数量必须为数字值'}
            ],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      columns: [
        {
          title: "序号",
          width: 80,
          customRender: (text, record, index) =>
            `${
              (this.paginationHandle.defaultCurrent - 1) *
                this.paginationHandle.defaultPageSize +
              index +
              1
            }`,
        },
        { title: "脸库名称", dataIndex: "displayName", scopedSlots: { customRender: "displayName" }, width: 100 },
        { title: "脸库编码", dataIndex: "code", scopedSlots: { customRender: "code" }, width: 100 },
        { title: "脸库ID", dataIndex: "id", width: 100},
        { title: "所属应用", dataIndex: "userId", scopedSlots: { customRender: "userId" }, width: 200 },
        { title: "APPID", dataIndex: "appId", width: 100},
        { title: "脸库容量", dataIndex: "maxSize", width: 100},
        { title: "人脸数量", dataIndex: "currentSize", width: 100},
        { title: "创建时间", dataIndex: "createTime", width: 170 },
        { title: "修改时间", dataIndex: "lastUpdateTime", width: 170 },
        { title: "操作", dataIndex: "action", scopedSlots: { customRender: "action" },width: 160, fixed: 'right' },
      ],
      tableData: [],
      
      loading: true,

      faceLibrayCode: '',
      
      paginationHandle: {
        defaultCurrent: 1,
        defaultPageSize: 20,
        total: 0,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["20", "30", "40", "50", "60", "70"],
        showTotal: (total) => `共 ${total} 条`,
        onShowSizeChange: (current, pageSize) => {
          this.paginationHandle.defaultCurrent = 1;
          this.paginationHandle.defaultPageSize = pageSize;
          this.getTableList();
        },
        onChange: (current, size) => {
          this.paginationHandle.defaultCurrent = current;
          this.paginationHandle.defaultPageSize = size;
          this.getTableList();
        },
      },

      pagingQuery: {
        appId: '',
        current: 1,
        size: 20,
        total: 20
      }
    }
  },
  filters: {
    filterAppId
  },
  methods: {
    searchMenuHandle({ key }) {
     this.pagingQuery.appId = key
     Promise.resolve().then(() => this.getTableList())
    },
   appChange(id) {
      this.form.appId = id
    },
    editNameHandle(row) {
      this.visible_editName = true
      this.faceLibrayCode = row.code
    },
    faceLibrary_handleCancel() {
        this.visible_faceLibrary = false
        this.$refs['ruleForm'].resetFields()
    },
    save_handleOk(formName) {
          this.$refs[formName].validate(valid => {
        if (valid) {
          createLibrary(this.ruleForm).then(res => {
              if(res) {
                if(res.data) {
                  this.$msg.success(res.msg)
                  this.faceLibrary_handleCancel()
                  this.getTableList()
                } else {
                   this.$msg.error(res.msg)
                }
              }
          })
        } else {
          return false
        }
      })
    },

    createLibraryShow() {
      this.visible_faceLibrary = true;
    },
    getTableList() {
      this.loading = true;
      libraryList(this.pagingQuery).then((res) => {
        if (res) {
          this.tableData = res.data.reverse()
        } else {
          this.$msg.error(res.msg)
        }
        this.loading = false
      }).catch(() => this.loading = false)
    },
    handleSizeChange(val) {
      this.pagingQuery.size = val;
      this.getTableList();
    },
    handleCurrentChange(val) {
      this.pagingQuery.current = val;
      this.getTableList();
    },
    downFaceZip(row) {
     
    },
    save_handleName() {
      let { displayName } = this.eidtNameForm
      editLibraryName(
        {
          displayName: displayName,
          code: this.faceLibrayCode
        }
      ).then(res => {
        if(res.code === 0) {
          this.getTableList()
          this.$msg.success(res.msg)
          this.visible_editName = false
          this.$refs.eidtRuleNameForm.resetFields()
        }
      })
    },
    delFaceLibray_handle(row) {
      this.loading = true
      deleteLibrary(
       {
        flagDrop: true
       },
        row.code
     ).then((res) => {
     if (res.code === 0) {
       this.$msg.success(res.msg)
       this.getTableList()
        this.loading = false
     } else {
        this.loading = false
     }
   }).catch(() => this.loading = false)
    },
    getAppList() {
       getAppList().then((res) => {
           this.appList = res
      })
    },
    fluchTableHandle() {
      this.pagingQuery.appId = ''
      this.getTableList()
    },
    goFaceDetailsPage(row) {
       this.$router.push('faceLibraryDetails?libraryCode=' + row.code)
    },
    goAppDetailsPage(row) {
      this.$router.push('/application-manage/editApplication?id=' + row.appId)
    },
    faceLibrary_name_handleCancel() {
      this.visible_editName = false
    }
  },
  created() {
    this.getTableList()
    this.getAppList()
  },
  mounted() {
  },
}
</script>